<template>
	<view class="wrap">
		<view class="buyItem">
			<view class="itemTit">学能提升VIP会员学习卡(180天)</view>
			<view class="itemCon">
				<image class="samePar posAbso ltzero" src="../../../static/images/zhuxue/halfYearBg.png" mode="aspectFill"></image>
				<view class="innerCon posAbso ltzero">
					<view class="conItem" @tap="goPriceIntro(180)">
						<view>参考价格介绍</view>
						<image class="ywImg" src="../../../static/images/zhuxue/help.png"></image>
					</view>
					<view class="smItem">产品增值服务</view>
					<view class="smItem">惊喜1.享受180天所有课程的免费学习</view>
					<view class="smItem">惊喜2.一线课堂网络到时精心录制的全程知识点视频讲解，能够帮你更快更容易的对课堂学习的知识点掌握</view>
					<view class="smItem">惊喜3.独特的溯源诊断和五步学习法让你彻底学会这个知识点！</view>
				</view>
			</view>
			<view class="itemBot" @tap="goBuy(180)">去购买</view>
		</view>
		<view class="buyItem">
			<view class="itemTit">学能提升VIP会员学习卡(365天)</view>
			<view class="itemCon">
				<image class="samePar posAbso ltzero" src="../../../static/images/zhuxue/oneYearBg.png" mode="aspectFill"></image>
				<view class="innerCon posAbso ltzero">
					<view class="conItem" @tap="goPriceIntro(365)">
						<view>参考价格介绍</view>
						<image class="ywImg" src="../../../static/images/zhuxue/help.png"></image>
					</view>
					<view class="smItem">产品增值服务</view>
					<view class="smItem">惊喜1.享受365天所有课程的免费学习</view>
					<view class="smItem">惊喜2.一线课堂网络到时精心录制的全程知识点视频讲解，能够帮你更快更容易的对课堂学习的知识点掌握</view>
					<view class="smItem">惊喜3.独特的溯源诊断和五步学习法让你彻底学会这个知识点！</view>
				</view>
			</view>
			<view class="itemBot" @tap="goBuy(365)">去购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goBuy(buyDays){
				this.util.showToast('后续开放');
				// uni.navigateTo({
				// 	url:'/pages/subIndex/confirmOrder/confirmOrder?buyDays=' + buyDays
				// })
			},
			goPriceIntro(buyDays){
				uni.navigateTo({
					url:'/pages/subIndex/onlineBuy/helpDoc?buyDays=' + buyDays
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.buyItem{
		@include respTo(phone){
			margin-bottom: 20rpx;
		}
		@include respTo(pad){
			margin-bottom: 20rpx;
		}
	}
	.itemTit,
	.itemBot{
		@include respTo(phone){
			height: 90rpx;
			line-height: 90rpx;
			font-size: $font-size34;
		}
		@include respTo(pad){
			height: 70rpx;
			line-height: 70rpx;
			font-size: $padSize20;
		}
		color: #fff;
		text-align: center;
	}
	.itemTit{
		background: $pss-color-blue;
		border-radius: 20rpx 20rpx 0 0;
	}
	.itemBot{
		background: #666;
		border-radius: 0 0 20rpx 20rpx;
	}
	.itemCon{
		@include respTo(phone){
			height: 460rpx;
		}
		@include respTo(pad){
			height: 360rpx;
		}
		background: #fff;
		position: relative;
		.smItem{
			@include respTo(phone){
				font-size: $font-size30;
			}
			@include respTo(pad){
				font-size: $padSize18;
			}
			color: $pss-text-color8;
			margin-bottom: 10rpx;
		}
		.conItem{
			display: flex;
			color: $pss-text-color3;
			margin-bottom: 15rpx;
			@include respTo(phone){
				font-size: $font-size32;
			}
			@include respTo(pad){
				font-size: $padSize22;
			}
			.ywImg{
				margin-left: 10rpx;
				@include respTo(phone){
					width: 43rpx;
					height: 36rpx;
				}
				@include respTo(pad){
					width: 33rpx;
					height: 26rpx;
				}
			}
		}
		.innerCon{
			left: 20rpx;
			right: 20rpx;
			top:30rpx;
			z-index: 2;
		}
		.conImg{
			z-index: 1;
		}
	}
	.wrap{
		@include respTo(phone){
			padding: 30rpx 30rpx 0;
		}
		@include respTo(pad){
			padding: 20rpx 20rpx 0;
		}
	}
</style>
